import { View, Text, ScrollView, StyleSheet, Pressable } from 'react-native';
import { router } from 'expo-router';

export default function NewsCategories() {
  const categories = [
    { id: 1, name: '推荐' },
    { id: 2, name: '科技' },
    { id: 3, name: '体育' },
    { id: 4, name: '财经' },
    { id: 5, name: '娱乐' },
  ];

  return (
    <ScrollView 
      horizontal 
      showsHorizontalScrollIndicator={false}
      style={styles.container}
    >
      {categories.map(category => (
        <Pressable 
          key={category.id}
          onPress={() => router.push({
            pathname: '/category/[id]',
            params: { 
              id: category.id,
              name: category.name 
            }
          })}
        >
          <Text style={styles.categoryItem}>{category.name}</Text>
        </Pressable>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    paddingVertical: 10,
  },
  categoryItem: {
    paddingHorizontal: 15,
    paddingVertical: 5,
    marginHorizontal: 5,
    borderRadius: 15,
    backgroundColor: '#f0f0f0',
    overflow: 'hidden',
  },
});